<template>
  <div class="el-header" style="text-align: right; font-size: 12px">
    <div class="patharea">
      <span id="curpath">{{ curPath }}</span>
    </div>
    <div class="userarea">
      <span class="userarea-item username">{{ userName }}</span>
      <el-dropdown class="userarea-item">
        <i class="el-icon-s-custom" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <a @click="showProfile">Profile</a></el-dropdown-item
          >
          <el-dropdown-item>
            <a @click="logout">Logout</a>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      userName: this.$store.curUser,
      curPath: "",
    };
  },
  computed: {
    uname() {
      return this.$store.state.userName;
    },
  },
  watch: {
    $route(route) {
      // console.log("route.path :>> ", route.path);
      this.curPath = route.path;
    },
  },
  methods: {
    showpath() {
      console.log("this.$router.path :>> ", this.$router);
      console.log("document.location.path :>> ", document.location.pathname);
    },
    showProfile() {
      console.log("show Profile");
    },
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.header {
  display: flex;
}
.patharea {
  width: 90%;
  text-align: left;
}
.userarea {
  display: flex;
  width: 10%;
  text-align: right;
}
.userarea-item {
  flex: 1;
  align-content: center;
}
.username {
  text-align: right;
}
</style>